<template>
  <view class="frequency-select flex gap-2 flex-col">
    <!-- 经络选择 -->
    <div class="flex flex-row justify-center">
      <div class="flex">
        <n-radio-group v-model:value="currentType" name="radiogroup">
          <div class="flex gap-2">
            <n-radio class="flex" v-for="item in meridianTypes" :key="item.value" :value="item.value">
              {{ item.label }}
            </n-radio>
          </div>
        </n-radio-group>
      </div>
    </div>

    <!-- 频率调节卡片 -->
    <n-card :size="'small'">
      <div class="flex flex-row justify-between">
        <div>左声道</div>
        <div>经络名称</div>
        <div>右声道</div>
      </div>

      <!-- 动态生成频率调节器 -->
      <div class="flex flex-col gap-4 mt-2">
        <div v-for="(audio, index) in currentAudios"
             :key="index"
             class="flex flex-row gap-2 justify-around items-center">
          <!-- 左声道滑块 -->
          <div class="w-2/5 accent-red-500 flex items-center gap-2">
            <div class="flex-1">
              <n-slider
                  v-model:value="audio.left_val"
                  :step="1"
                  :min="0"
                  :max="100"
                  @update:value="handleLeftChange(index, $event)"
                  style="--n-fill-color: #ef4444;--n-fill-color-hover: #ef4444;"
              />
            </div>
            <n-switch v-model:value="audio.left_enabled" size="small"/>
          </div>
          <!-- 经络名称 -->
          <div class="text-center w-1/6">{{ audio.name }}</div>

          <!-- 右声道滑块 -->
          <div class="w-2/5 accent-green-300 flex items-center gap-2">
            <n-switch v-model:value="audio.right_enabled" size="small"/>
            <div class="flex-1">
              <n-slider
                  v-model:value="audio.right_val"
                  :step="1"
                  :min="0"
                  :max="100"
                  @update:value="handleRightChange(index, $event)"
              />
            </div>
          </div>
        </div>
      </div>
    </n-card>
    <div class="flex flex-row justify-center mt-2">
      <div class="p-2 flex items-center">
        <n-input-group>
          <div class="border-l border-t border-b rounded-l border-green-500 pl-2">定时</div>
          <div class="border-b border-t border-green-500 pl-2 pr-2" @click="showModal = true">
            <n-countdown :duration="countdownDuration" :active="isCountdownActive" @finish="handleCountdownFinish"/>
          </div>
          <n-button size="small" type="success" ghost @click="toggleCountdown">
            <PlaySharp v-if="!isCountdownActive" class="w-4 h-4"/>
            <PauseSharp v-else class="w-4 h-4"/>
          </n-button>
        </n-input-group>
      </div>
    </div>

    <!-- 添加时间选择模态框 -->
    <n-modal v-model:show="showModal" preset="dialog" title="设置倒计时">
      <div class="flex flex-col items-center gap-4">
        <n-time-picker
            v-model:value="selectedTime"
            :actions="null"
            placeholder="请选择时长"
        />
        <div class="flex gap-2">
          <n-button @click="confirmTime" type="primary">确定</n-button>
          <n-button @click="showModal = false">取消</n-button>
        </div>
      </div>
    </n-modal>
  </view>
</template>

<script setup>
import {computed, ref} from 'vue'
import {PlaySharp, PauseSharp} from '@vicons/ionicons5'

// 经络类型选项
const meridianTypes = [
  {
    value: '12_zheng_jing',
    label: '十二正经'
  },
  {
    value: 'qi_jing_ba_mai',
    label: '奇经八脉'
  },
  {
    value: 'zhou_sheng_yao_xue',
    label: '周身要穴'
  },
  {
    value: 'mai_lun',
    label: '脉轮'
  }
];

// 当前选中的经络类型
const currentType = ref('12_zheng_jing');

// 更新经络的音频数据
const audios = ref([
  // 十二正经
  {
    name: "脾经",
    left_val: 0,
    right_val: 0,
    left_frequency: 254,
    right_frequency: 508,
    left_enabled: false,
    right_enabled: false,
    type: "12_zheng_jing",
  },
  {
    name: "胃经",
    left_val: 0,
    right_val: 0,
    left_frequency: 270,
    right_frequency: 540,
    left_enabled: false,
    right_enabled: false,
    type: "12_zheng_jing",
  },
  {
    name: "大肠经",
    left_val: 0,
    right_val: 0,
    left_frequency: 280,
    right_frequency: 560,
    left_enabled: false,
    right_enabled: false,
    type: "12_zheng_jing",
  },
  {
    name: "肺经",
    left_val: 0,
    right_val: 0,
    left_frequency: 300,
    right_frequency: 600,
    left_enabled: false,
    right_enabled: false,
    type: "12_zheng_jing",
  },
  {
    name: "肝经",
    left_val: 0,
    right_val: 0,
    left_frequency: 330,
    right_frequency: 660,
    left_enabled: false,
    right_enabled: false,
    type: "12_zheng_jing",
  },
  {
    name: "胆经",
    left_val: 0,
    right_val: 0,
    left_frequency: 345,
    right_frequency: 690,
    left_enabled: false,
    right_enabled: false,
    type: "12_zheng_jing",
  },
  {
    name: "三焦经",
    left_val: 0,
    right_val: 0,
    left_frequency: 368,
    right_frequency: 736,
    left_enabled: false,
    right_enabled: false,
    type: "12_zheng_jing",
  },
  {
    name: "心包经",
    left_val: 0,
    right_val: 0,
    left_frequency: 380,
    right_frequency: 760,
    left_enabled: false,
    right_enabled: false,
    type: "12_zheng_jing",
  },
  {
    name: "肾经",
    left_val: 0,
    right_val: 0,
    left_frequency: 410,
    right_frequency: 820,
    left_enabled: false,
    right_enabled: false,
    type: "12_zheng_jing",
  },
  {
    name: "膀胱经",
    left_val: 0,
    right_val: 0,
    left_frequency: 440,
    right_frequency: 880,
    left_enabled: false,
    right_enabled: false,
    type: "12_zheng_jing",
  },
  {
    name: "小肠经",
    left_val: 0,
    right_val: 0,
    left_frequency: 465,
    right_frequency: 930,
    left_enabled: false,
    right_enabled: false,
    type: "12_zheng_jing",
  },
  {
    name: "心经",
    left_val: 0,
    right_val: 0,
    left_frequency: 490,
    right_frequency: 980,
    left_enabled: false,
    right_enabled: false,
    type: "12_zheng_jing",
  },
  // 奇经八脉
  {
    name: "任脉",
    left_val: 0,
    right_val: 0,
    left_enabled: false,
    right_enabled: false,
    type: "qi_jing_ba_mai",
  },
  {
    name: "督脉",
    left_val: 0,
    right_val: 0,
    left_enabled: false,
    right_enabled: false,
    type: "qi_jing_ba_mai",
  }
]);

// 根据当前选中的类型筛选显示的经络
const currentAudios = computed(() => {
  return audios.value.filter(audio => audio.type === currentType.value);
});

// 处理左声道值变化
const handleLeftChange = (index, value) => {
  currentAudios.value[index].left_val = value;
  // TODO: 处理音频播放逻辑，只有在 enabled 时才播放
  if (currentAudios.value[index].left_enabled) {
    console.log(`左声道${currentAudios.value[index].name}值变为:`, value);
  }
};

// 处理右声道值变化
const handleRightChange = (index, value) => {
  currentAudios.value[index].right_val = value;
  // TODO: 处理音频播放逻辑，只有在 enabled 时才播放
  if (currentAudios.value[index].right_enabled) {
    console.log(`右声道${currentAudios.value[index].name}值变为:`, value);
  }
};

// 新增倒计时相关的状态
const showModal = ref(false)
const selectedTime = ref(null)
const countdownDuration = ref(0) // 倒计时时长（毫秒）
const isCountdownActive = ref(false)

// 确认时间选择
const confirmTime = () => {
  if (selectedTime.value) {
    const date = new Date(selectedTime.value)
    // 只取时分秒，转换为毫秒
    countdownDuration.value = (
        date.getHours() * 3600 +
        date.getMinutes() * 60 +
        date.getSeconds()
    ) * 1000

    showModal.value = false
    isCountdownActive.value = true
  }
}

// 切换倒计时状态
const toggleCountdown = () => {
  if (countdownDuration.value > 0) {
    isCountdownActive.value = !isCountdownActive.value
  } else {
    // 如果没有设置时间，点击播放按钮时打开模态框
    showModal.value = true
  }
}

// 倒计时结束处理
const handleCountdownFinish = () => {
  isCountdownActive.value = false
  // TODO: 可以添加提示音或其他提示
  window.$message.success('倒计时结束')
}
</script>

<style lang="scss">
.frequency-select {
  .title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
}

// 添加模态框相关样式
.n-modal {
  .n-card-header {
    text-align: center;
  }
}
</style>
